<template>
    <div :class="$style.calendar_container">
      <div class="calendar-header">
        <div class="flex align-center ptb15 plr15 b-block c-mainTheme-bg c_white">
          <div class="text-left flex-1 ">
            <v-icon @click="$emit('leftMenuClick')" name='menu2 c_white' size="30"></v-icon>
          </div>
          <div class="flex-5 b_FS-32 text-center c_white">
            {{ currentMonth }}.{{currentYear}}
          </div>
          <div class="text-right flex-1">
            <v-icon @click="$emit('rightMenuClick')" name='search c_white' size="45" ></v-icon>
          </div>
        </div>
      </div>
      <div class="c-mainTheme-bg" @scroll = '$_scrollCalendar' ref="calendar" :class="$style.day_container">
       <template v-for="(item, key) in monthDatas">
         <div  :ref="item.dateStr" @click="currentDateStr = item.dateStr; $emit('selectDate',item.dateStr)" :class="[$style.item, item.dateStr == currentDateStr && $style.active]">
           <p>{{ item.weekDay }}</p>
           <p>{{ item.date }}</p>
         </div>
       </template>
      </div>
    </div>
</template>
<script type="text/babel">
    import calendarUtils from '@/util/calendar.js'
    const monthsFormat = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    const calenderGenerator = new calendarUtils({
      monthsFormat
    })
    export default {
        name: "calendar",
        components: {},
        data() {
            return {
              generator : null ,
              monthDatas: [] ,
              currentMonth: '',
              currentYear: '',
              currentDateStr : '' ,
              reachRight: false ,
              reachLeft: false
            }
        },
        created() {
        },
        mounted() {
          const {months ,currentDateStr } = calenderGenerator.initData()
          this.monthDatas = months
          this.currentDateStr = currentDateStr
          setTimeout(()=>{
            // 定时后, 页面才把 dom 渲染出来
            // 定位到当天
            this.$refs.calendar.scrollLeft = this.$refs[this.currentDateStr][0].offsetLeft - 50
          },200 )
          this.$_updateTitleDesc()
        },
        beforeDestroy() {
        },
        computed: {},
        methods: {
          $_updateTitleDesc(){
            this.currentMonth = monthsFormat[calenderGenerator.currentMonth ]
            this.currentYear = calenderGenerator.currentYear
          },
          $_scrollCalendar(){
            const el = this.$refs.calendar
            const outLeft = el.scrollWidth
            const currentWidth = el.offsetWidth
            const offLeft = el.scrollLeft
            if( currentWidth + offLeft == outLeft ){
              this.reachRight = true
              setTimeout(()=>{
                this.reachRight = false
              }, 1000)
              const months = this.monthDatas.concat(calenderGenerator.scrollToRight())
              this.monthDatas = months
              this.$_updateTitleDesc()
            }
            if( offLeft == 0 ){
              this.reachLeft = true
              setTimeout(()=>{
                this.reachLeft = false
              }, 1000)
              const months = (calenderGenerator.scrollToLeft()).concat( this.monthDatas )
              this.monthDatas = months
              this.$_updateTitleDesc()
            }
          }
        }
    }
</script>

<style module lang='scss'>
  .calendar_container{
    box-shadow: 0 5px 20px #41C2FC;
    .day_container {
      white-space:nowrap;
      width: 100vw ;
      overflow-x: auto ;
      position: relative;
      .item{
        display: inline-block;
        width: 92px ;
        padding: 12px 0 ;
        border-bottom: 6px solid #41C2FC;
        margin-bottom: 2px;
        &.active{
          border-bottom: 8px solid white;
        }
        p{
          color: white ;
          width: 92px ;
          font-size: 28px;
          color: white ;
          text-align: center;
          margin-bottom: 7px;
        }
      }
    }
  }
</style>
